<template>
    <div class="sendOrder">
        <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" >
            <div>
            <el-form-item label="订单号:">
                <el-input v-model="formInline.orderCode" placeholder="订单编号" size="small"></el-input>
            </el-form-item>
            <el-form-item label="收货人姓名:">
                <el-input v-model="formInline.buyName" placeholder="收货人姓名" size="small"></el-input>
            </el-form-item>
            <el-form-item label="商品名称:">
                <el-input v-model="formInline.goodsName" placeholder="商品名称" size="small"></el-input>
            </el-form-item>
                <el-form-item label="收货人手机号:">
                    <el-input v-model="formInline.shouPhone" placeholder="收货人手机号" size="small"></el-input>
                </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="" @click="clear" >清空</el-button>
            </el-form-item>
            </div>
        </el-form>
        </div>
        <div>
            <div class="tabButton">
                <el-button size="mini" type="primary" plain class="iconfont" @click="dayin"><span>&#xe6af</span> 打印发货单</el-button>
                <el-button size="mini" type="primary" plain class="iconfont"  @click="dayin"><span>&#xe6af</span> 打印运单</el-button>
                <el-button size="mini" plain class="iconfont"  @click=""><span>&#xe628;</span> 批量导出</el-button>
            </div>
            <template>
                <el-table
                        ref="multipleTable"
                        :data="tableShow"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="商品信息"
                            prop="goods"
                            width="150">
                        <template  slot-scope="scope">
                        <el-image :src="scope.row.goodsSrc" style="vertical-align: middle ;width: 60px; height: 50px;" ></el-image>
                        <span>{{scope.row.goodsName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="orderCode"
                            label="订单编号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="userId"
                            label="买家"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="orderPrice"
                            label="实收款"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="orderCreateTime"
                            label="下单时间"
                            width="160">
<!--                        <template slot-scope="scope">{{ scope.row.date }}</template>-->
                    </el-table-column>
                    <el-table-column
                            prop="addressName"
                            label="收货人名称"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="addressPhone"
                            label="收货人号码"
                            width="130">
                    </el-table-column>
                    <el-table-column
                            prop="addressContent"
                            label="收货人地址"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="orderStatus"
                            label="订单状态"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="操作"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                        <el-button    class="iconfont" @click="open(scope.row)"><span>&#xe625</span>物流信息</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--页码-->
                <div class="block">
                    <el-pagination
                            @size-change="5"
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage1"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="tableData.length">
                    </el-pagination>
                </div>
            </template>
        </div>
<!--        模态框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                style="text-align: left"
                :before-close="handleClose">
            <div>
               <p> 订单：<span>{{itemArr.orderCode}}</span></p>
                <p>商品名称：<span>{{itemArr.goodsName}}</span></p>
                <p>收货人姓名：<span>{{itemArr.addressName}}</span></p>
                <p>收货人电话：<span>{{itemArr.addressPhone}}</span></p>
                <p>收货人地址：<span>{{itemArr.addressContent}}</span></p>
            </div>
            <div class="block" >
                <div class="radio" style="margin-bottom: 20px ;" >
                   物流信息：
                    <el-radio-group v-model="reverse" >
                        <el-radio :label="true">倒序</el-radio>
                        <el-radio :label="false">正序</el-radio>
                    </el-radio-group>
                </div>

                <el-timeline :reverse="reverse">
                    <el-timeline-item
                            v-for="(activity, index) in activities"
                            :key="index"
                            :timestamp="activity.timestamp">
                        {{activity.content}}
                    </el-timeline-item>
                </el-timeline>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import '../../../public/font/font_jcr5wjzc7r/iconfont.css';
    export default {
        name: "sendOrder",
        data(){
            return {
                formInline: {
                    orderCode: '',
                    shouPhone: '',
                    userId:'',
                    goodsName:'',
                    buyName:'',
                },
                actionArr:[],
                change:false,
                text:'展开',
                tableData: [
                //     {
                //     goodsSrc:'https://img1.360buyimg.com/n6/jfs/t1/154776/36/4909/43086/5fa27fd6Ec82a1b7c/a8987e228b77d53d.jpg',
                //     goodsName:'iphone12',
                //     orderId:'125156355115',
                //     buyName:'虫虫',
                //     money:'6799',
                //     orderTime:'2021-02-20',
                //     orderState:'未签收'
                //
                // },
                ],
                multipleSelection: [],
                dialogVisible: false,
                reverse: true,
                activities: [{
                    content: '运输中',
                    timestamp: '2018-04-15'
                }, {
                    content: '已出库',
                    timestamp: '2018-04-13'
                }, {
                    content: '已发货',
                    timestamp: '2018-04-11'
                }],
                itemArr:[],
                pageSize:5,
                tableShow:[],
            //    页码
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4,
            }
        },
        methods: {
            onSubmit() {
                //console.log(this.formInline);
                var data=this.formInline
                this.$axios.post('/api/order/deliveryList?&orderCode='+this.formInline.orderCode+'&goodsName='+this.formInline.goodsName+'&addressName='+this.formInline.buyName+'&addressPhone='+this.formInline.shouPhone
                   ).then((res)=>{
                    this.tableShow=res.data.data;
                    this.tableShow.forEach((item,index)=>{
                        item.goodsImg=res.data.data[index].goods.goodsImg
                        item.goodsName=res.data.data[index].goods.goodsName
                        item.addressName=res.data.data[index].address.addressName
                        item.addressPhone=res.data.data[index].address.addressPhone
                        item.addressContent=res.data.data[index].address.addressContent
                    })
                })
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.actionArr=this.multipleSelection
                console.log( this.actionArr)
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            dayin(){
                console.log(this.actionArr)
                if (this.actionArr.length>0){
                    this.$message('共'+this.actionArr.length+'数据，打印中....');
                    this.$refs.multipleTable.clearSelection();
                }else {
                    this.$message('未勾选数据');
                    this.$refs.multipleTable.clearSelection();
                }

            },
            open(tab) {
                this.dialogVisible = true;
                this.itemArr=tab;
                console.log(tab)
            },
            clear(){
               this.formInline.buyName='';
               this.formInline.goodsName='';
               this.formInline.shouPhone='';
               this.formInline.orderCode='';
               this.loadList();
            },
            loadList(){
                this.$axios.post('/api/order/deliveryList',{sendState:1}).then((res)=>{
                    console.log(res.data.data)
                    this.tableData=res.data.data;
                    this.tableData.forEach((item,index)=>{
                        item.goodsImg=res.data.data[index].goods.goodsImg
                        item.goodsName=res.data.data[index].goods.goodsName
                        item.addressName=res.data.data[index].address.addressName
                        item.addressPhone=res.data.data[index].address.addressPhone
                        item.addressContent=res.data.data[index].address.addressContent
                    })
                    this.tableShow=this.tableData
                    console.log(this.tableData)

                })
            },
        //    分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.$axios.post('/api/order/deliveryList?page='+val).then((res)=>{
                    this.tableShow=res.data.data;
                    this.tableShow.forEach((item,index)=> {
                        item.goodsImg = res.data.data[index].goods.goodsImg
                        item.goodsName = res.data.data[index].goods.goodsName
                        item.addressName = res.data.data[index].address.addressName
                        item.addressPhone = res.data.data[index].address.addressPhone
                        item.addressContent = res.data.data[index].address.addressContent
                    })
                })
            }
        },



        mounted() {
            this.loadList();
        }
    }

</script>

<style scoped>
.demo-form-inline{
    text-align: left;
}
    .tabButton{
        text-align: left;
    }
    .block{
        text-align: left;
    }

</style>